<!-- 积分信息 -->
<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
</script>

<template>
  <view class="integral-info">
    <view class="left-panel">
      <view class="level-name">
        {{ userStore.getUserLevel }}
      </view>
      <view class="total">
        <text>总积分 </text>
        <text class="integral">
          {{ userStore.userInfo.score_total }}
        </text>
      </view>

      <view class="update-date">
        更新时间：{{ userStore.scoreUpdateTime }}
      </view>
    </view>
    <view class="right-panel">
      <image class="icon" webp src="/src/static/images/level.png" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
	.integral-info {
  padding: 27px 22px 9px 22px;
  border-radius: 8px;
  box-shadow: 0px 5px 32px 0px rgba(0, 0, 0, 0.08);
  background: linear-gradient(
    180deg,
    rgba(247, 244, 200, 0.5),
    rgba(240, 204, 114, 0.5) 83%,
    rgba(252, 214, 122, 0.5) 98%
  );
  display: flex;
  justify-content: space-between;
  .left-panel {
    flex-shrink: 0;
    font-weight: 500;
    color: #d08909;
    .level-name {
      font-size: 32px;
      line-height: 18px;
    }

    .total {
      padding-top: 25px;
      font-size: 16px;
      line-height: 18px;
      .integral {
        font-size: 24px;
      }
    }

    .update-date {
      padding-top: 45px;
      font-size: 16px;
      line-height: 18px;
      color: #eeb041;
    }
  }

  .right-panel {
    flex-shrink: 0;
    margin-top: -55px;
    // position: relative;
    .icon {
      width: 118px;
      height: 118px;
    }
  }
}
</style>
